<template>
	<view class="content">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in productDetail.imgList" :key="index"><image :src="imgURl + item" mode=""></image></swiper-item>
		</swiper>
		<view class="tishi">
			温馨提示！下单前请联系商家确认是否有货！
			<text style="color: #000000;margin-left: 50upx;">库存{{ productDetail.sellCount }}</text>
		</view>
		<view class="msg">
			<view class="title">
				<text>{{ productDetail.productName }}</text>
				<image v-if="isLike == 0" src="../../static/home/like1.png" mode="" @click="AddCollection(productDetail.productId)"></image>
				<image v-else src="../../static/home/like2.png" mode="" @click="AddCollection(productDetail.productId)"></image>
			</view>
			<view class="info">{{ productDetail.descript }}</view>
			<view class="price">￥{{ currentPrice ? currentPrice : productDetail.price }}元/{{ productDetail.specUnit }}</view>
			<navigator class="address" url="/pages/addressList/addressList">
				<text>送至</text>
				<text v-if="address.addressId">{{ address.province }}-{{ address.city }}-{{ address.area }}{{ address.addressLine1 }}</text>
				<text v-else>添加收货地址</text>
				<image src="../../static/home/gengduo_41.png" mode=""></image>
			</navigator>
		</view>
		<view class="liubai"></view>
		<view class="guige" @click="isShowguige">
			<text>规格</text>
			<text>{{ guige ? guige + 'X' + buy_count : '请选择规格' }}</text>
			<image src="../../static/home/gengduo_41.png" mode=""></image>
		</view>
		<view class="liubai"></view>
		<view class="comment">
			<view class="title">
				<text>用户评价({{ size }})</text>
				<text @click="gotoComment(productDetail.productId)">查看全部></text>
			</view>
			<view class="item" v-if="commentList.length > 0">
				<image class="h_img" :src="imgURl + commentList[0].userPhoto" mode=""></image>
				<text>{{ commentList[0].nickName }}</text>
				<image class="x_img" src="../../static/home/wujiaoxing_03.png" mode="" v-for="(item, index) in commentList[0].commentStar" :key="index"></image>
			</view>
		</view>
		<view class="liubai"></view>
		<view class="product_title"><text>热门店铺</text></view>
		<view class="img_list"><image :src="imgURl + item" mode="" v-for="(item, index2) in productDetail.imgList" :key="index2"></image></view>
		<view class="bottom">
			<image src="../../static/home/weixin_07.png" mode="" @click="copy(productDetail.weChatId)"></image>
			<image src="../../static/home/dianhua_06.png" mode="" @click="callUp(productDetail.phone)"></image>
			<text @click="addCart()">加入购物车</text>
			<text @click="gotoPay">立即下单</text>
		</view>
		<view class="bottomWindow" v-if="showGuige">
			<view class="content">
				<view class="head">
					<image :src="imgURl + productDetail.imgList[0]" mode=""></image>
					<view class="msg">
						<text>￥{{ currentPrice ? currentPrice : productDetail.price }}元/{{ productDetail.specUnit }}</text>
						<text>已选择{{ guige }}</text>
					</view>
				</view>
				<text>规格</text>
				<view class="guige2">
					<text
						:class="{ active: guigeTabs == index }"
						v-for="(item, index) in productDetail.specList"
						:key="index"
						@click="guigeChange(item.productSpecs, index, item.specId, item.price)"
					>
						{{ item.productSpecs }}
					</text>
				</view>
				<view class="shuliang">
					<text>选数量</text>
					<view class="list-cont">
						<text class="sub" @click="sub">-</text>
						<text class="sub">{{ buy_count }}</text>
						<text class="add" @click="add">+</text>
					</view>
				</view>
				<view class="btn" @click="isOK()">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
import { baseURL, imgURl } from '../../common/config/index.js';
import { getProductById, AddCollection, addShopCart, addVisitRecord, addOrder, getCommentList } from '@/request/API/product.js';
import { getUserAddressListByUserId } from '@/request/API/index.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			size: 0, //评论总数
			currentPrice: '', //当前选中规格价格
			isLike: 0, //是否收藏的标记  0未收藏 1收藏
			guigeTabs: '-1', //
			guige: '', //选择的规格
			specId: '', //规格id
			imgURl: '',
			showGuige: false,
			buy_count: 1,
			productDetail: {
				productId: '',
				imgList: [],
				specList: []
			},
			address: {
				addressId: ''
			},
			commentList: [
				{
					userPhoto: '',
					nickName: '',
					commentStar: ''
				}
			] //评论列表
		};
	},
	computed: {
		...mapState(['userId'])
	},
	onLoad(options) {
		this.imgURl = imgURl;
		this.productDetail.productId = options.id;
		this.getProductById(this.productDetail.productId, this.userId); //获取商品详情
		this.addVisitRecord(); //添加商品足迹
		this.getCommentList(this.productDetail.productId, 1, 10);
		this.getUserAddressListByUserId(this.userId);
	},
	onShow() {
		this.getUserAddressListByUserId(this.userId);
	},
	methods: {
		//添加取消收藏
		AddCollection(id) {
			let dataFailure = '';
			if (this.isLike == 0) {
				this.isLike = 1;
				dataFailure = 1;
			} else {
				this.isLike = 0;
				dataFailure = 0;
			}

			let params = {
				userId: this.userId,
				productId: id,
				dataFailure: dataFailure //0取消收藏 1收藏
			};
			AddCollection(params).then(res => {
				if (res.data.code == 0) {
					uni.showToast({
						title: res.data.data,
						duration: 2000
					});
				}
			});
		},
		//获取评论列表
		getCommentList(productId, pageNo, pageSize) {
			getCommentList(productId, pageNo, pageSize).then(res => {
				if (res.data.code == 0) {
					this.commentList = res.data.data.list;
					this.size = res.data.data.size;
				}
			});
		},
		//选择规格
		guigeChange(name, index, specId, price) {
			this.guige = name;
			this.currentPrice = price;
			this.guigeTabs = index;
			this.specId = specId;
		},
		//用户地址列表
		getUserAddressListByUserId(id) {
			getUserAddressListByUserId(id).then(res => {
				if (res.data.code == 0) {
					//有默认地址取默认地址 没有取第一个
					for (let item of res.data.data) {
						if (item.isDefault) {
							this.address = item;
						} else {
							this.address = res.data.data[0];
						}
					}
				}
			});
		},
		//添加足迹
		addVisitRecord() {
			let params = {
				userId: this.userId,
				productId: this.productDetail.productId,
				visitType: 0
			};
			addVisitRecord(params).then(res => {});
		},
		//获取商品详情
		getProductById(id, userId) {
			getProductById(id, userId).then(res => {
				if (res.data.code == 0) {
					console.log(222);
					this.productDetail = res.data.data;
					this.isLike = res.data.data.isCollection;
				}
			});
		},
		isShowguige() {
			this.showGuige = true;
		},
		isOK() {
			this.showGuige = false;
		},

		callUp(e) {
			uni.makePhoneCall({
				phoneNumber: e
			});
		},
		//复制
		copy(e) {
			uni.setClipboardData({
				data: e,
				success: function() {
					uni.showToast({
						title: '复制成功',
						duration: 2000
					});
				}
			});
		},
		addCart() {
			if (this.specId == '') {
				uni.showModal({
					title: '',
					content: '请选择商品规格',
					showCancel: false
				});
				return;
			}
			if (this.address.addressId == '') {
				uni.showModal({
					title: '',
					content: '请添加收货地址',
					showCancel: false
				});
				return;
			}
			if (this.productDetail.sellCount < 1) {
				uni.showModal({
					title: '',
					content: '库存不足',
					showCancel: false
				});
				return;
			}
			let params = {
				addressId: this.address.addressId,
				userId: this.userId,
				productId: this.productDetail.productId,
				specId: this.specId,
				productNum: this.buy_count
			};
			addShopCart(params).then(res => {
				if (res.data.code == 0) {
					uni.showToast({
						title: '加入购物车成功',
						duration: 2000
					});
				}
			});
		},
		sub() {
			if (this.buy_count == 1) {
				return;
			}
			this.buy_count--;
		},
		add() {
			this.buy_count++;
		},
		inputBuycount() {},
		gotoPay() {
			if (this.specId == '') {
				uni.showModal({
					title: '',
					content: '请选择商品规格',
					showCancel: false
				});
				return;
			}
			if (this.address.addressId == '') {
				uni.showModal({
					title: '',
					content: '请添加收货地址',
					showCancel: false
				});
				return;
			}
			if (this.productDetail.sellCount < 1) {
				uni.showModal({
					title: '',
					content: '库存不足',
					showCancel: false
				});
				return;
			}
			let productList = []; //循环遍历 此处只有一条  为了方便 跟购物车下单统一格式
			let params = {
								img:this.productDetail.imgList[0],
				expressId: this.productDetail.expressId, //配送方式
				specUnit: this.productDetail.specUnit, //单位
				shopId: this.productDetail.shopId,
				productId: this.productDetail.productId,
				specId: this.specId,
				productName: this.productDetail.productName,
				productPrice: this.productDetail.price,
				productCount: this.buy_count,
				prescriptionPrice: this.productDetail.price * this.buy_count
			};
			productList.push(params);
			let productList2 = [];
			for (let item of productList) {
				let product = {
					img:item.img,
					expressId: item.expressId,
					shopId: item.shopId,
					productId: item.productId,
					specId: item.specId,
					productName: item.productName,
					productPrice: item.productPrice,
					productCount: item.productCount,
					prescriptionPrice: item.prescriptionPrice,
					orderRemark: '',
					addressId: this.address.addressId
				};
				productList2.push(product);
			}
			let params2 = {
				userId: this.userId,
				orderDetailList: productList2
			};
			addOrder(params2).then(res => {
				if (res.data.code == 0) {
					uni.navigateTo({
						url: '/pages/confirmOrder/confirmOrder?params=' + JSON.stringify(params) + '&orderList=' + res.data.data.orderIdList[0]
					});
				} else {
					uni.showToast({
						title: '生成订单失败',
						icon: 'none',
						duration: 1000
					});
				}
			});
		},
		gotoComment(id) {
			uni.navigateTo({
				url: '/pages/commentList/commentList?id=' + id
			});
		}
	}
};
</script>

<style lang="less" scoped>
.content {
	width: 100%;
	font-size: 26upx;
	overflow-x: hidden;
	.swiper {
		height: 375upx;
		width: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.tishi {
		color: #999999;
		padding: 20upx;
	}
	.msg {
		box-sizing: border-box;
		padding: 20upx 30upx;
		.title {
			display: flex;
			justify-content: space-between;
			font-weight: bold;
			font-size: 30upx;
			image {
				height: 40upx;
				width: 40upx;
			}
		}
		.info {
			color: #999999;
			margin-top: 10upx;
		}
		.price {
			color: #ee7181;
			font-weight: bold;
			font-size: 30upx;
			padding-bottom: 15upx;
			margin-top: 10upx;
			border-bottom: 1px solid #eeeeee;
		}
		.address {
			height: 100upx;
			color: #999999;
			display: flex;
			align-items: center;
			image {
				width: 35upx;
				height: 35upx;
			}
			text:nth-of-type(2) {
				margin-left: 30upx;
				width: 560upx;
			}
		}
	}
	.liubai {
		width: 100%;
		height: 20upx;
		background-color: #f7f7f7;
	}
	.comment {
		width: 100%;
		padding: 0 20upx;
		box-sizing: border-box;
		.title {
			display: flex;
			justify-content: space-between;
			text:last-of-type {
				color: #ed7180;
			}
		}
		.item {
			margin-top: 10upx;
			display: flex;
			align-items: center;
			color: #999999;
			.h_img {
				height: 80upx;
				width: 80upx;
				border-radius: 100%;
			}
			.x_img {
				margin-left: 10upx;
				height: 30upx;
				width: 30upx;
			}
			text {
				margin-right: 280upx;
			}
		}
	}
	.guige {
		width: 100%;
		padding: 20upx 30upx;
		height: 100upx;
		color: #999999;
		display: flex;
		align-items: center;
		image {
			width: 35upx;
			height: 35upx;
		}
		text:nth-of-type(2) {
			margin-left: 30upx;
			width: 560upx;
		}
	}
	.product_title {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 88upx;
		padding: 0 20upx;
		text:first-of-type {
			font-size: 34upx;
			font-weight: bold;
			margin-left: 20upx;
			position: relative;
		}
		text:first-of-type::after {
			position: absolute;
			top: 0;
			left: -20upx;
			content: '';
			height: 100%;
			width: 5upx;
			background-color: red;
		}
	}
	.img_list {
		width: 100%;
		padding: 0 25upx;
		box-sizing: border-box;
		image {
			margin-top: 10upx;
			width: 100%;
			height: 400upx;
		}
		image:last-of-type {
			margin-bottom: 100upx;
		}
	}
	.bottom {
		font-size: 30upx;
		color: #ffffff;
		position: fixed;
		bottom: 0;
		z-index: 999;
		height: 95upx;
		width: 100%;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		image {
			height: 50upx;
			width: 50upx;
			margin-left: 50upx;
		}
		text {
			text-align: center;
			line-height: 95upx;
			height: 95upx;
			width: 250upx;
			&:first-of-type {
				margin-left: 50upx;
				background-color: #f0b3ba;
			}
			&:last-of-type {
				background-color: #ed7180;
			}
		}
	}
	.bottomWindow {
		width: 100%;
		height: 100%;
		background-color: rgba(000, 000, 000, 0.5);
		z-index: 99999;
		position: fixed;
		top: 0;
		right: 0;
		.content {
			font-size: 30upx;
			position: fixed;
			bottom: 0;
			height: 580upx;
			width: 100%;
			background-color: #ffffff;
			padding: 25upx 40upx;
			box-sizing: border-box;
			.head {
				display: flex;
				margin-bottom: 20upx;
				image {
					height: 140upx;
					width: 140upx;
				}
				.msg {
					display: flex;
					flex-direction: column;
					text:first-of-type {
						color: #ee7181;
						font-weight: bold;
						margin-bottom: 20upx;
					}
				}
			}
			.guige2 {
				display: flex;
				margin-top: 20upx;
				margin-bottom: 20upx;
				text {
					padding: 10upx 20upx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #999999;
					border-radius: 10upx;
					&:not(:first-of-type) {
						margin-left: 20upx;
					}
					&.active {
						border: 1px solid red;
						color: #ed7180;
					}
				}
			}
			.shuliang {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30upx;
				.list-cont {
					height: 60upx;
					width: 200upx;
					line-height: 60upx;
					margin-left: 20upx;
					display: flex;
					border: 1px solid #ddd;
					border-radius: 3px;
				}

				.list-cont text {
					width: 60upx;
					text-align: center;
					font-weight: bold;
					font-size: 38upx;
				}

				.list-cont input {
					height: 60upx;
					line-height: 60upx;
					width: 80upx;
					text-align: center;
					font-size: 30upx;
					border-right: 1px solid #ddd;
					border-left: 1px solid #ddd;
				}
			}
			.btn {
				width: 518upx;
				height: 96upx;
				background-color: rgb(237, 113, 128);
				color: #ffffff;
				border-radius: 10upx;
				text-align: center;
				line-height: 96upx;
				margin: 0 auto;
			}
		}
	}
}
</style>
